import { Fragment, useEffect, CSSProperties } from 'react';
import { useNavigate, NavLink, useLocation } from 'react-router-dom'
import { Layout, Menu, Dropdown, Avatar, Badge } from 'antd'
import { FontSizeOutlined } from '@ant-design/icons';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { userState, notificationState } from '../../store'
import { notificationApi } from '../../api'
import { locales } from '../../config'
import { 
  FullscreenOutlined,
  FullscreenExitOutlined,
} from '@ant-design/icons';
import Setting from './setting'

import logo from '../../logo.svg'

const { Header } = Layout

// 通知相关的接口
const { getNotification } = notificationApi

interface IProps {
  menu?: any;
  handleFullScreen?: any;
  theme?: any;
  children?: any;
}

const iconStyle: CSSProperties = { 
  fontSize: '20px', 
  padding: '22px 10px' 
}

const MyHeader = (props: IProps) => {
  const setLang = useSetRecoilState(userState.langAtom);
  const setIsLogin = useSetRecoilState(userState.loginAtom);
  const [userInfo, setUserInfo] = useRecoilState(userState.userInfoAtom);
  const [list, setList] = useRecoilState(notificationState.listAtom);

  const navigate = useNavigate()
  const location = useLocation()

  // 未读取通知的数量
  const notificationsUnReadCount = list.filter(({ hasRead }) => hasRead === false).length

  useEffect(() => {
    const getNotificationList = (params: any) => {
      getNotification(params).then((res: any) => {
        setList(res.data.list)
        // notificationsCount = res.data.list.filter((item: any) => item.hasRead === true).length
      }) 
    }

    getNotificationList({page: 1, pageSize: 10})
    // console.log( notification )
  }, [])

  // 点选用户下拉菜单
  const onDropDownMenuClick = (e: any) => {
    if (e.key === 'logout') {
      // 用户退出时，删除状态信息
      setIsLogin(false)
      setUserInfo({})
      navigate('/')
    } else {
      navigate(e.key)
    }
  }

  // 用户下拉框
  const userDropdown = () => (
    <Menu onClick={ onDropDownMenuClick }>
      <Menu.Item key="admin/notification" >
        <Badge dot={Boolean(list.length)} >
          通知中心
        </Badge>
      </Menu.Item>
      <Menu.Item key="admin/profile" >
        个人设置
      </Menu.Item>
      <Menu.Item key="logout" >
        退出登录
      </Menu.Item>
    </Menu>
  );

  // 选择语言
  const selectLang = (item: any) => {
    // 可用的语言选项
    setLang(locales[item.key])
  }

  // 多语言下拉框
  const langDropdown = () => (
    <Menu onClick={selectLang}>
      <Menu.Item key="zh_CN" >
        中文
      </Menu.Item>
      <Menu.Item key="en_US" >
        English
      </Menu.Item>
    </Menu>
  );

  return (
    <Fragment>
      <Header className={ props.theme } >
        <div className="yy-logo" >
          <img src={logo} alt="logo" />
        </div>
        <div className="yy-header" >
          <Menu theme={ props.theme } mode="horizontal" defaultSelectedKeys={[ location.pathname.substring(1) ]}>
          {
            props.menu.map((item: any) => {
              return (
                <Menu.Item key={item.path} >
                  <NavLink to={item.path} className={() => location.pathname.substring(1) === item.path ? "active" : "" } >{item.title}</NavLink>
                </Menu.Item>
              )
            })
          }
          </Menu>
          <div style={{ display: 'flex', justifyContent: 'space-between'}}>
            {/* 多语言选择菜单 */}
            <Dropdown overlay={ langDropdown } >
              <FontSizeOutlined style={ iconStyle } />
            </Dropdown>

            {/* <Setting style={ iconStyle } /> */}

            {/* 全屏菜单 */}
            {
              props.handleFullScreen.active
              ?
              <FullscreenExitOutlined style={ iconStyle } onClick={ props.handleFullScreen.exit } />
              :
              <FullscreenOutlined style={ iconStyle } onClick={ props.handleFullScreen.enter } />
            }

            {/* 用户下拉菜单 */}
            <Dropdown overlay={ userDropdown } trigger={['click']}>       
              <div style={{ paddingLeft: '10px' }}>
                <Avatar src={userInfo.avatar} />
                <span style={{ padding: '0 10px'}}> 欢迎你！{userInfo.displayName} </span>
                <Badge count={ notificationsUnReadCount } offset={[-15,-5]} />
              </div>
            </Dropdown>
          </div>
        </div>
      </Header>
    </Fragment>
  );
}

export default MyHeader;
